// 全局变量
let timer = null
let show = document.getElementsByClassName("show")[0]
let showUI = document.getElementsByClassName("showUl")[0]
let flag = true;
let boards = $('.board');
let menuRightUl = $(".menuRight ul")
let menuRightLi = 'li'
let leftMenuContentDrawing = $(".leftMenuContent .wrapper.drawing")
let content = '.content'
let classActive = 'active'
let menuLeft = $(".menuLeft")
let menuLeftSpan = 'span'
let leftMenuContent = $(".leftMenuContent")
let wrapper = '.wrapper'
let leftMenuContentCollection = $(".leftMenuContent .wrapper.collection")
let login = $('.login')
let model = $(".model")
let close = $(".close")
let navIcon = $(".nav-icon")
let navBack = $(".navBack")
let proceeding = $(".proceeding")
let linkBack = $('.linkBack')

// 函数防抖
const debounce = (fn, wait) => {
    // let timer = null
    return function (e) {
        if (timer !== null) {
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            if (e.target.nodeName === 'LI') {
            fn(e) }
        }, wait)
        // console.log(timer);
        // clearTimeout(timer)
    }
}

// 函数节流
const throttle = (fn, wait) => {
    let canRun = true
    return (e) => {
        if (!canRun) return
        canRun = false
        setTimeout(() => {
            if (e.target.nodeName === 'LI') {
            fn(e)}
            canRun = true
        }, wait)
    }
}

// 控制menu菜单的显示与隐藏
const controlMenu = () => {
    if (flag) {
        show.style.maxHeight = "200px";
        show.style.transition =
            "all 1s linear";
        showUI.style.transform = "rotate(0)";
        flag = false;
    } else {
        show.style.maxHeight = "40px";
        show.style.transition =
            "all 0.6s linear";
        showUI.style.transform =
            "rotate(180deg)";
        flag = true;
    }
}


// 鼠标悬停时，框向上下移动
const boardsEnter = (item) => {
    return () => {
        item.style.transform = "translateY(-3px)";
        item.style.transition = "all 0.5s";
    }
}
const boardsLeave = (item) => {
    return () => {
        item.style.transform = "translateY(0)";
        item.style.transition = "all 0.5s";
    }
}

// 鼠标向下滚动时，固定footer层
const fixFooter = () => {
    if (document.documentElement.scrollTop > 0) {
        document.getElementsByTagName("footer")[0].style.display = "flex";
    } else {
        document.getElementsByTagName("footer")[0].style.display = "none";
    }
}

/*
    封装点击菜单导航切换
*/
// const clickEvent = ({
//     item,
//     targetParentElement
// }) => {
//     return () => {
//         // 先将所有导航元素的className移除
//         menuRightUl.find(menuRightLi)
//             .each((i, item1) => {
//                 $(item1).removeClass(classActive);
//             });
//         // 给当前点击导航元素添加目标className
//         $(item).addClass(classActive);
//         // 获取当前点击元素的index
//         let index = $(item).attr("index");
//         // 将所有目标元素的className移除
//         targetParentElement
//             .find(content)
//             .each((i, item1) => {
//                 $(item1).removeClass(classActive);
//             });
//         // 给目标元素当前index值的元素添加目标className
//         $(
//             targetParentElement.find(content)[index]
//         ).addClass(classActive);
//         // timer = null
//         // console.log(123);
//     }
// }

const clickEvent = ({targetParentElement}) => {
    // let timer = null
    return (e) => {
        console.log(e.target);
        // if(timer) clearTimeout(timer)
        // timer =setTimeout(() => {
            // if (e.target.nodeName === 'LI') {
                $(e.target).addClass(classActive).siblings().removeClass(classActive)
                let index = $(e.target).attr("index")
                targetParentElement
                    .find(content)
                    .each((i, item1) => {
                        $(item1).removeClass(classActive);
                    });
                // 给目标元素当前index值的元素添加目标className
                $(
                    targetParentElement.find(content)[index]
                ).addClass(classActive);
            // }
        // }, 1000)
        
    }
}


const navLink = () => {
    menuRightUl
        .find(menuRightLi)
        .each((i, item) => {
            $(item).attr("index", i);
            // item.addEventListener('click', clickEvent({targetParentElement}, 1000), false)
            // item.addEventListener('click', throttle(clickEvent, 1000), false) //函数节流
        });
};


// 点击切换采集与画板
const toggleMenu = (item) => {
    return () => {
        menuLeft
            .find(menuLeftSpan)
            .each((i, item1) => {
                $(item1).removeClass(classActive);
            });
        let index = $(item).attr("index");
        leftMenuContent
            .find(wrapper)
            .each((i, item1) => {
                $(item1).removeClass(classActive);
            });
        $(leftMenuContent.find(wrapper)[index]).addClass(classActive);
        $(item).addClass(classActive);
        let label = $(item).html();
        // console.log(label);
        if (label === "采集") {
            menuRightUl[0].onclick = debounce(clickEvent({targetParentElement: leftMenuContentCollection}), 1000)
            menuRightUl[0].onclick = throttle(clickEvent({targetParentElement: leftMenuContentCollection}), 1000)  

        } else if (label == "画板") {
            menuRightUl[0].onclick = debounce(clickEvent({targetParentElement: leftMenuContentDrawing}), 1000)
            menuRightUl[0].onclick = throttle(clickEvent({targetParentElement: leftMenuContentDrawing}), 1000)
        }
    }
}

// 改变css样式
const changeCss = (ele, style) => {
    return () => {
        ele.css(style)
    }
}

// 控制元素显示
const displayBlock = (ele) => {
    return () => {
        ele.css({
            display: "block",
        })
    }
}

// 控制元素隐藏
const displayNone = (ele) => {
    return () => {
        ele.css({
            display: 'none'
        })
    }
}

// 阻止默认事件
const preventDefault = (e) => {
    e.preventDefault();
}

// 点击右侧展开按钮控制导航栏
showUI.onclick = controlMenu

// 鼠标移到详情时动画
boards.each((i, item) => {
    item.onmouseenter = boardsEnter(item)
    item.onmouseleave = boardsLeave(item)
});

// 页面滚动时固定footer
document.onscroll = fixFooter

// 默认在画板模块调用
navLink()
menuRightUl[0].onclick = debounce(clickEvent({targetParentElement: leftMenuContentDrawing}), 1000)
menuRightUl[0].onclick = throttle(clickEvent({targetParentElement: leftMenuContentDrawing}), 1000)

// 点击切换采集与画板
menuLeft
    .find(menuLeftSpan)
    .each((i, item) => {
        // 点击切换menuRight下的li
        // 默认进入页面下'画板'的导航
        $(item).attr("index", i);
        item.onclick = toggleMenu(item)
    });


// 点击登录与注册时显示与隐藏中间面板
login[0].onclick = changeCss(model, {display: 'block'})

// 弹出遮挡框之后阻止底层页面滑动
model[0].addEventListener(
    "mousewheel",
    preventDefault,
    false
);

// 点击关闭按钮关闭遮挡层
close[0].onclick = changeCss(model, {display: 'none'})

// 鼠标悬停在九宫格点时效果
navIcon[0].onmouseenter = changeCss(navBack, {display: 'block'})
navIcon[0].onmouseleave = changeCss(navBack, {display: 'none'})
navBack[0].onmouseenter = changeCss(navBack, {display: 'block'})
navBack[0].onmouseleave = changeCss(navBack, {display: 'none'})

// 鼠标悬停在遮挡层上的第三方登录效果
proceeding.each((i, item) => {
    item.onmouseenter = changeCss($(linkBack[i]), {display: 'block'})
    item.onmouseleave = changeCss($(linkBack[i]), {display: 'none'})
    linkBack[i].onmouseenter = changeCss($(linkBack[i]), {display: 'block'})
    linkBack[i].onmouseleave = changeCss($(linkBack[i]), {display: 'none'})
});

// canvas绘制
let worksCanvas = document.getElementById('worksCanvas')
let worksCtx = worksCanvas.getContext('2d')
worksCtx.fillStyle = '#fff'
worksCtx.font = '14px sans-serif'
worksCtx.fillText('作品集', 10, 18)